<template>
  <nav class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex">
          <div class="flex-shrink-0 flex items-center">
            <router-link to="/" class="text-xl font-bold text-indigo-600 no-select">
              CloudBase Vue
            </router-link>
          </div>
          <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
            <router-link 
              to="/" 
              class="border-transparent text-gray-600 hover:bg-gray-50 hover:text-gray-900 inline-flex items-center px-3 py-2 rounded-md text-base font-medium no-select"
              :class="{ 'bg-indigo-50 text-indigo-700': $route.path === '/' }"
            >
              首页
            </router-link>
            <router-link 
              to="/text-converter" 
              class="border-transparent text-gray-600 hover:bg-gray-50 hover:text-gray-900 inline-flex items-center px-3 py-2 rounded-md text-base font-medium no-select"
              :class="{ 'bg-indigo-50 text-indigo-700': $route.path === '/text-converter' }"
            >
              文本转换工具
            </router-link>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="sm:hidden">
      <!-- 添加灰色水平分隔线 -->
      <div class="border-t-2 border-gray-300 mx-4 my-1"></div>  
      <div class="pt-2 pb-3 flex justify-center space-x-4">
        <router-link 
          to="/" 
          class="text-gray-600 hover:bg-indigo-50 hover:text-indigo-700 px-3 py-2 rounded-md text-base font-medium no-select transition-colors duration-200"
          :class="{ 'bg-indigo-50 text-indigo-700': $route.path === '/' }"
        >
          首页
        </router-link>
        <router-link 
          to="/text-converter" 
          class="text-gray-600 hover:bg-indigo-50 hover:text-indigo-700 px-3 py-2 rounded-md text-base font-medium no-select transition-colors duration-200"
          :class="{ 'bg-indigo-50 text-indigo-700': $route.path === '/text-converter' }"
        >
          文本转换工具
        </router-link>
      </div>
    </div>
  </nav>
</template>

<script setup>
// 导航栏组件
</script>